<template>
  <Module-box title="设备运行环境数据" height="293px" bg="short1">
    <div id="env-box" class="env-box" @mouseenter="clearSrcoll" @mouseleave="resumeScroll"
      @wheel.prevent="handleScroll">
      <div id="env-box-body" class="env-box-body" :style="{ transform: `translateY(-${scrollPosition}px)` }">
        <div v-for="(item, k) in dataList" :key="k" class="env-info">
          <div class="env-row">
            <div class="env-label">客户名称</div>
            <div class="env-value">
              <div :id="'env-id-' + k">{{ item.hospital_name || "--" }}</div>
            </div>
            <div v-if="item.environment_state === 2" class="env-icon">
              <img src="@/assets/env-warning.png" />
            </div>
          </div>
          <div class="env-row">
            <div class="env-label">科室</div>
            <div class="env-value">
              <div>{{ item.department_name || "--" }}</div>
            </div>
            <div class="env-label">类型</div>
            <div class="env-value">
              <div>{{ item.leibie_name || "--" }}</div>
            </div>
          </div>
          <div class="env-row">
            <div class="env-label">品牌</div>
            <div class="env-value">
              <div>{{ item.pinpai_name || "--" }}</div>
            </div>
            <div class="env-label">型号</div>
            <div class="env-value">
              <div>{{ item.xinghao_name || "--" }}</div>
            </div>
          </div>
          <div class="env-line" />
          <div class="env-grid">
            <div v-for="(u, t) in item.unit" :key="k + '_' + t" class="env-item">
              <div>{{ u.unit_name || "-" }}</div>
              <div :style="{ color: u.state == 2 ? '#2BFF00' : '#fff' }">
                {{ u.port_value || "--" }}{{ u.port_value ? u.unit : "" }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Module-box>
</template>
<script>
  import { getEnvironmentList } from "@/utils/screen";
  export default {
    data() {
      return {
        dataList: [], // 环境数据
        scrollPosition: 0, // 滚动位置
        offsetHeight: 0, // 滚动高度
        scrollInterval: null, // 定时器
      };
    },
    watch: {
      scrollPosition(val) {
        if (val >= this.offsetHeight) {
          this.scrollPosition = 0;
          this.clearSrcoll();
          this.srcollSrceen();
        }
      },
    },
    mounted() {
      this.getList();
    },
    destroyed() {
      this.clearSrcoll();
    },
    methods: {
      // 获取环境数据
      getList() {
        getEnvironmentList({ client: 1, screen: 1 }).then((res) => {
          this.dataList = res.data.lists || [];
          this.$emit(
            "refresh",
            this.dataList.some((i) => i.environment_state === 2)
          );
          const box = document.getElementById("env-box");
          const body = document.getElementById("env-box-body");
          if (box && body) {
            this.scrollPosition = 0;
            this.offsetHeight = body.offsetHeight;
            this.clearSrcoll();
            this.srcollSrceen();
            this.$nextTick(() => {
              this.dataList.forEach((item, index) => {
                this.setSrcoll(index);
              });
            });
          }
        });
      },
      // 滚轮滚动
      handleScroll(e) {
        if (e.deltaY < 0) {
          this.scrollPosition = Math.max(this.scrollPosition - 20, 0);
        } else {
          this.scrollPosition += 20;
        }
      },
      // 鼠标离开行
      resumeScroll() {
        this.clearSrcoll();
        this.srcollSrceen();
      },
      // 清除滚动
      clearSrcoll() {
        if (this.scrollInterval) {
          clearTimeout(this.scrollInterval);
          this.scrollInterval = null;
        }
      },
      // 滚动
      srcollSrceen() {
        this.scrollInterval = setInterval(() => {
          this.scrollPosition += 1;
        }, 50);
      },
      // 设置滚动
      setSrcoll(index) {
        let doms = document.querySelectorAll(".env-value");
        if (doms && doms.length) {
          doms.forEach((item) => {
            if (item.scrollWidth > item.offsetWidth) {
              let div = item.querySelector("div");
              div.className = "env-marquee";
            }
          });
          this.$nextTick(() => {
            let row = this.dataList[index];
            this.labelStyle(index, row.environment_state == 2);
          });
        }
      },
      // 标题渐变
      labelStyle(index, isRed = false) {
        let dom = document.getElementById("env-id-" + index);
        dom.style.width = dom.scrollWidth + "px" || "100px";
        if (isRed) {
          dom.style.color = "transparent";
          dom.style.background = "linear-gradient(180deg, #FFF2F2 0%, #FF1418 100%)";
          dom.style.webkitBackgroundClip = "text";
          dom.style.webkitTextFillColor = "transparent";
        } else {
          dom.style.color = "#fff";
          dom.style.background = "none";
          dom.style.webkitBackgroundClip = "none";
          dom.style.webkitTextFillColor = "#fff";
        }
      },
    },
  };
</script>
<style lang="scss" scoped>
  .env-box {
    height: 223px;
    overflow-y: auto;

    .env-box-body {
      min-height: 100%;
    }
  }

  .env-info {
    width: 100%;
    min-height: 100%;
    background: url("~@/assets//env-bg.png") no-repeat;
    background-size: 100% 100%;
    padding: 6px 20px;
    box-sizing: border-box;
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }

    .env-row {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 40px;
      line-height: 40px;

      .env-label {
        width: 80px;
        font-size: 18px;
        color: #b9c0c4;
      }

      .env-value {
        flex: 1;
        font-size: 18px;
        color: #fff;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        margin-right: 10px;
      }

      .env-icon {
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 80%;
          height: 80%;
        }
      }
    }

    .env-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);

      .env-item {
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-bottom: 10px;

        >div:first-child {
          margin-bottom: 6px;
          color: #b9c0c4;
        }
      }
    }

    .env-line {
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, transparent 5%, #adcee6, transparent 95%);
      margin: 10px 0;
    }
  }

  /* 整个滚动条 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    display: none;
  }

  /* 滚动条轨道 */
  ::-webkit-scrollbar-track {
    background: #011554;
    border-radius: 3px;
  }

  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    background: #06c1ff;
    border-radius: 3px;

    &:hover {
      background: #039bce;
    }
  }
</style>
<style>
  .env-marquee {
    animation: scroll 10s linear infinite;
  }

  @keyframes scroll {
    10% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-100%);
    }
  }
</style>